<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../demo07/阿里图标/font/demo.css">
    <link rel="stylesheet" href="../demo07/阿里图标/font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .box {
            position: relative;
            width: 600px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
        }

        .box .lunbo {
            display: flex;
            position: absolute;
        }

        .box .lunbo img {
            width: 600px;
            height: 300px;
        }

        .zuo,
        .you {
            position: absolute;
            top: 140px;
            font-size: 30px;
            display: flex;
            display: none;
        }

        .zuo {
            left: 10px;
        }

        .you {
            right: 10px;
        }

        .box ol {
            position: absolute;
            bottom: 20px;
            left: 10px;
            display: flex;
        }

        .box ol li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-left: 10px;
            background-color: #fff;
            font-size: 10px;
        }
        .xia{
            width: 600px;
            height: 300px;
            background-color: pink;
            margin-top: -100px;
            margin-left: 636px;
            border-radius: 5px;
            position: relative;
            display: flex;
        }
        .a{
            width: 295px;
            height: 300px;
            background-color: #c2bbbb;
            
        }
        span{
            font-size: 18px;
        }
        .b{
            position: absolute;
            right: 1px;

        }
        
    
        
    </style>
</head>

<body>
    
    <div class="box" >
        <button>奥利给111或222</button>
        <ul class="lunbo">
            <li><img src="../demo06/图片/11.jpg" alt=""></li>
            <li><img src="../demo06/图片/22.jpg" alt=""></li>
            <li><img src="../demo06/图片/33.jpg" alt=""></li>
            <li><img src="../demo06/图片/44.jpg" alt=""></li>
            <li><img src="../demo06/图片/55.jpg" alt=""></li>
        </ul>
        <div class="zuo iconfont icon-zuojiantou"></div>
        <div class="you iconfont icon-youjiantou"></div>

        <div>
            <ol>
                <li style="background-color: red;" index="0"></li>
                <li index="1">1</li>
                <li index="2">2</li>
                <li index="3">3</li>
                <li index="4">4</li>
                
            </ol>
        </div>
    </div>
    
    <div class="xia">
            <div class="a">
                <h2>双11淘江湖</h2>
                <span>挂机互动赢手机 摸...周末聊天室，请喝咖...速来捡大漏!!双11...【月结账期工具：先...乡村振兴第四期】</span>
            </div>
            <div class="b">
                <h2>双11淘宝直播</h2>
                <img src="../demo06/0.png" alt="">
            </div>
        </div>
    
</body>

</html>
<script>
    var box = document.querySelector('.box');
    var lunbo = document.querySelector('.lunbo');
    var zuo = document.querySelector('.zuo');
    var you = document.querySelector('.you');

    box.onmouseenter=function(){
        zuo.style.display='block';
        you.style.display='block';
        clearInterval(time)
    }
    box.onmouseleave=function(){
        zuo.style.display='none';
        you.style.display='none';
        zidong();
    }
    var num = 0;
    you.onclick = function () {
        num++;
        if (num == 5) {
            num = 0;
        }
        lunbo.style.left = (-600 * num) + 'px'
        aaa(num)
    }
    zuo.onclick = function () {
        num--;
        if (num < 0) {
            num = 4;
        }
        lunbo.style.left = -(600 * num) + 'px'
        aaa(num)
    }
    var time;
    function zidong() {
        time = setInterval(function () {
            you.onclick();
        }, 2000)
    }
    zidong()
    var yuan = document.querySelectorAll('ol li');
    for (var i = 0; i < yuan.length; i++) {
        yuan[i].onclick = function () {
            for (var i = 0; i < yuan.length; i++) {
                yuan[i].style.backgroundColor = '#fff'
            }
            this.style.backgroundColor = 'red'
            var index = this.getAttribute('index');
            num = index
            lunbo.style.left = -(600 * num) + 'px'
        }
    }
    function aaa(index){
        for (var i = 0; i < yuan.length; i++) {
            yuan[i].style.backgroundColor = "#fff"
            }
        yuan[index].style.backgroundColor = "red"
    }


</script>